<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="花海世界"></u-navbar>
		<scroll-view @scrolltolower="onLower" @scroll="handleScroll" :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<view class="foster-content">
				<template v-if="loading">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
				</template>
				<template v-else-if="!loading && list.length === 0">
					<u-empty
					    mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</template>
				<template v-else-if="!loading && list.length > 0">
					<view style="padding: 32rpx 0;background-color: #fff;">
						<view v-for="(row, index) in list" :key="index" :style="{padding: '0 32rpx', 'marginBottom': list.length-1 === index ? 0 : '32rpx'}">
							<u-row :gutter="8" :customStyle="{'marginBottom': list.length-1 === index ? 0 : '8px'}">
								<u-col span="4" v-for="(col, colIndex) in row" :key="colIndex">
									<FlowerItem :item="col"/>
								</u-col>
							</u-row>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
		<view class="good-detail-bootom" v-if="!loading">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button @click="uploadPhoto" iconColor="#fff" :throttleTime="300" icon="camera-fill" :color="appColor" text="拍照识花" shape="circle"></u-button>
				</view>
			</view>
		</view>
		<u-popup closeable :closeOnClickOverlay="false" :show="showInfo" @close="closeBuyInfo" :round="10">
			<template v-if="!info">
				<u-empty
				    mode="search"
					icon="http://cdn.uviewui.com/uview/empty/search.png"
				>
				</u-empty>
				<view style="height: 96rpx;"/>
			</template>
			<template v-else>
				<view class="popup-title1">
					<u--image radius="8rpx" mode="aspectFill" :src="info.coverURL" width="180rpx" height="180rpx"></u--image>
					<view style="height: 16rpx;"/>
					<view style="color: #333;font-weight: bold;font-size: 32rpx;">{{info.name}}</view>
				</view>
				<scroll-view :scroll-y="true" style="height: 660rpx;">
					<view style="padding: 0 32rpx;">
						<view style="padding: 16rpx 0;font-size: 32rpx;color: #000;">别名</view>
						<view style="margin-bottom: 16rpx;">
							<view style="color: #333;font-size: 28rpx;">{{info.alias}}</view>
						</view>
						<view style="padding: 16rpx 0;font-size: 32rpx;color: #000;">科属</view>
						<view style="margin-bottom: 16rpx;">
							<view style="color: #333;font-size: 28rpx;">{{info.family}}</view>
						</view>
						<view style="padding: 16rpx 0;font-size: 32rpx;color: #000;">养护方式</view>
						<view style="margin-bottom: 16rpx;">
							<view style="color: #333;font-size: 28rpx;">{{info.careKnowledge}}</view>
						</view>
						<view style="padding: 16rpx 0;font-size: 32rpx;color: #000;">植物详情</view>
						<view>
							<view style="color: #333;font-size: 28rpx;">{{info.desc}}</view>
						</view>
					</view>
				</scroll-view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import FlowerItem from './flowerItem.vue';
	import {landPlant} from '@/api/home.js';
	import {chunkArr} from '@/utils/index.js';
	import {getToken} from '@/utils/auth.js'
	import {base_url} from '@/utils/request.js'
	import {noTokenToLogin} from '@/utils/index.js';
	
	export default {
		components: {
			FlowerItem
		},
		data() {
			return {
				dataList: [], // 认养列表
				loading: false,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 10,
				showInfo: false,
				info: {}
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			},
			list() {
				return chunkArr(this.dataList, 3)
			}
		},
		onLoad() {
			// 获取通知消息列表
			this.$cuLoading('加载中...').then(() => {
				this.landPlant();
			})
			
		},
		methods: {
			...mapActions(['setDetail']),
			closeBuyInfo() {
				this.showInfo = false
			},
			uploadPhoto() {
				noTokenToLogin(false).then(() => {
					console.log('未登录');
				}).catch(() => {
					let token = getToken();
					let that = this;
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							that.$cuLoading('识别中...').then(() => {
								uni.uploadFile({
									url: base_url+'/jeecg-boot/park/image/discern', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[0],
									name: 'file',
									header: {
										'X-Access-Token': token
									},
									success: (uploadFileRes) => {
										that.info = JSON.parse(uploadFileRes.data).result;
										that.showInfo = true;
									},
									complete() {
										uni.hideLoading();
									}
								});
							})
						}
					});
				});
			},
			// 获取通知消息列表
			landPlant() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				landPlant(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					uni.hideLoading()
					this.loading = false;
				});
			},
			onLower() {
				if(this.status === 'loading') {
					this.landPlant();
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.popup-title1 {
		padding: 32rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
